<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
    <title>AI-Football</title>
   <link href="/static/common.css" rel="stylesheet">
      <style>
        /* 父容器样式 */
             .table-container {
            width: 80%;
            padding: 20px;
            /* 新增容器居中保障 */
            box-sizing: border-box;
        }



        .my-table {
            width: 80%;
            border-collapse: collapse;
            margin: 10px auto; /* 修改此处实现居中 */
            box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 可选阴影效果 */
        }

        /* 表头/单元格通用样式 */
        .my-table th,
        .my-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        /* 表头特殊样式 */
        .my-table th {
            background-color: #f8f9fa;
            font-weight: bold;
        }

        /* 行悬浮效果 */
        .my-table tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>

<div class="container">
    <div id="header" style="left:0;right:0;display:flex;justify-content: space-around;"></div> <!-- header占位符 -->
    <div id="data-container">
        <!-- 数据将插入到这里 -->
        <div id="main" style="width: 100%;height:400px;"></div>
         <div class="table-container" style="width: 100%;">
        <table class="my-table">
        </table>
    </div>
    </div>
    <div id="loading" style="display:none;"></div>
</div>

<!-- 新增底部导航占位符 -->
<div id="bottom"></div>

<script>
    // 现有的JavaScript代码
</script>
<script>

</script>
<script src="/static/common.js"></script> <!-- 引入common.js -->
<script >

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
window.addEventListener('resize', function() {
  myChart.resize();
});
option = {
colorBy: 'series',
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 6, name: 'Search Engine44' },
        { value: 4, name: 'Direct66' },
        { value: 0, name: 'Email' },
        { value: 1, name: 'Union Ads' }
      ]
    }
  ]
};

</script>
<script>
function mapToJsonArray(map) {
  const array = [];

  for (let [key, value1] of map) {
    // 将值转换为字符串，因为JSON键必须是字符串
    let obj = {
  value: value1,
  name: key
};
    if (key=='Win'){
    obj.itemStyle= {color: '#FF0000'}
    }else if(key=='Win Half'){
    obj.itemStyle= {color: '#CD5C5C'}
    }else if(key=='Lose'){
    obj.itemStyle= {color: '#000000'}
    }else if(key=='Lose Half'){
    obj.itemStyle= {color: '#696969'}
    }

    array.push(obj);
  }
  return array;
}

function pad(num) {
    return num.toString().padStart(2, '0');
}

function timestampToLocalTime(timestamp) {
    if (typeof timestamp !== 'number' || isNaN(timestamp)) {
        throw new Error('Invalid timestamp');
    }
    let date = new Date(timestamp);
    if (isNaN(date.getTime())) {
        throw new Error('Invalid date');
    }
    let year = date.getFullYear();
    let month = pad(date.getMonth() + 1);
    let day = pad(date.getDate());
    let hours = pad(date.getHours());
    let minutes = pad(date.getMinutes());
    return month+'月'+day+'日'+hours+':'+ minutes ;
}


function displayData(data){
    const tb = document.querySelector('.my-table');
    tb_html = '<tr><th>比赛时间</th><th>联赛</th><th>队伍</th><th>推荐</th><th>比分</th><th>红黑</th></tr>';
    series_data={};
    let dict = new Map();
    data.forEach(function(item, index) {
    tb_html+="<tr><td>"+timestampToLocalTime(item.start_time)+"</td><td>"+item.league+"</td><td>"+item.home+" - "+item.away+"</td><td>"+item.prediction+"</td><td>"+item.score+"</td><td>"+item.performance+"</td></tr>";
    if (dict.get(item.performance) == null){
        dict.set(item.performance, 1);
    } else {
        dict.set(item.performance, dict.get(item.performance)+1);
    }
    });
    option.series[0].data = mapToJsonArray(dict);
    tb.innerHTML = tb_html;
    option && myChart.setOption(option);
}


async function loadData() {

    try {
        const response = await fetch(`/result?start_time=1741259446000&end_time=1741532400000`);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        displayData(data);
    } catch (error) {
        console.log('加载数据时出错，请重试。');
    } finally {

    }
}
loadData()

</script>
</body>
</html>